const previewImages = document.querySelectorAll(".preview"),
    mainFrame = document.querySelector(".pre-main");


previewImages.forEach(img => {
    img.addEventListener('click', () => {
        const image = document.createElement("div");

        image.style.position = 'absolute'
        image.style.width = '100%'
        image.style.height = '100%'
        image.style.top = '0'
        image.style.zIndex = '7'
        image.style.background = 'lightgrey'

        image.innerHTML = `
            <p class="closeImg">X</p>
            <img class="centerImg" src="${img.src}" alt="image" />
            `;

        const closeFrame = image.querySelector('.closeImg');

        closeFrame.style.position = 'absolute'
        closeFrame.style.top = '5%'
        closeFrame.style.right = '10%'
        closeFrame.style.color = 'red'
        closeFrame.style.fontSize = '3rem'
        closeFrame.style.cursor = 'pointer'

        closeFrame.addEventListener('click', () => {
            image.remove()
        })

        mainFrame.append(image)

    })

});
